import React, { Component } from 'react'
import { Row, Col, Button, message, Input, Form } from 'antd'
import {actions, connect} from 'mirrorx'
import api from '../../api'
import T from '../../lib/T'
import { ClaimTypes, DateFormat, ImageHeader } from './Dictionaries'

const FormItem = Form.Item
const formItemLayout = {
  labelCol: { span: 10 },
  wrapperCol: { span: 12 }
}

class ClaimDetail extends Component {
  constructor (props) {
    super(props)
    this.state = {
      claimModel: {},
      claimAppModel: {},
      imageModel: {
        idImages: [], // 身份证明 图片列表
        mcImages: [], // 诊断书（健康）图片列表
        mrImages: [], // 病历卡（健康）图片列表
        losImages: [], // 损失清单（财产）图片列表
        losRepImages: [], // 原始损失或损害报告（财产）图片列表
        otherImages: [] // 其他
      }

    }
    // 数据请求模型  发邮件
    this.detailModel = {
      claimId: T.urlQuery('claimId'),
      claimEmail: ''
    }
  }

  componentDidMount () {
    const queryDetailDTO = T.ajax({
      url: api.queryClaimDetail.path,
      data: {
        claimId: this.detailModel.claimId
      }
    })
    queryDetailDTO.then((model) => {
      const detail = model.data || {}
      this.setState({
        claimModel: detail.claimApplication || {},
        claimAppModel: detail.claimApplicationAccount || {},
        imageModel: {
          idImages: detail.identificationImageList || [],
          mcImages: detail.medicalCertificateImageList || [],
          mrImages: detail.medicalReceiptImageList || [],
          losImages: detail.lossImageList || [],
          losRepImages: detail.lossReportImageList || [],
          otherImages: detail.otherImageList || []
        }
      })
    })
  }

  /**
   * 发送邮件
   * @memberof ClaimDetail
   */
  sendEmail () {
    this.props.form.validateFields((error, values) => {
      if (!error) {
        this.detailModel.claimEmail = values.claimEmail
        const sendEmailDTO = T.ajax({
          url: api.sendClaimEmail.path,
          data: this.detailModel
        })
        sendEmailDTO.then((model) => {
          // 发送成功 提示
          if (model.code == 0) {
            message.success('Send Success')
            window.setTimeout(() => {
              // 回到列表页
              actions.routing.push({
                pathname: '/page-claim'
              })
            }, 1000)
          } else {
            message.error(model.message)
          }
        })
      }
    })
  }

  render () {
    const ceilWidth = 8
    const rowLWidth = 8
    const rowRWidth = 16
    const doubleWidth = 12
    const imageWidth = 2

    const { getFieldDecorator } = this.props.form

    let {grantedMenus} = this.props
    let menuAuth = false
    if (grantedMenus) {
      console.log('Claim', grantedMenus)
      menuAuth = T.getMenuAuth('Claim', grantedMenus)
    }
    console.log('this.props', this.props.grantedMenus)
    return (
      <div>
        <div className='claim-detail-box'>
          <div className='detail-title'>Claim Detail</div>
          <div className='detail-content'>
            <div className='detail-inner' >
              {/* Begin Policy Info */}
              <div className='detail-info'>
                <div className='title'>
                  Policy Info
                </div>
                <div className='info-item'>
                  <Row className='info-model' gutter={2}>
                    <Col span={ceilWidth}>
                      <Row className='row-model'>
                        <Col span={rowLWidth}>Policy No:</Col>
                        <Col span={rowRWidth}>{this.state.claimModel.policyNo}</Col>
                      </Row>
                    </Col>
                    <Col span={ceilWidth}>
                      <Row className='row-model'>
                        <Col span={rowLWidth}>Insured Name:</Col>
                        <Col span={rowRWidth}>{this.state.claimModel.insuredName}</Col>
                      </Row>
                    </Col>
                    <Col span={ceilWidth}>
                      <Row className='row-model'>
                        <Col span={rowLWidth}>Nature of Claim:</Col>
                        <Col span={rowRWidth}>{ClaimTypes[this.state.claimModel.claimType]}</Col>
                      </Row>
                    </Col>
                    <Col span={ceilWidth}>
                      <Row className='row-model'>
                        <Col span={rowLWidth}>Claim Amount($):</Col>
                        <Col span={rowRWidth}>{parseFloat(this.state.claimModel.claimAmount).toLocaleString()}</Col>
                      </Row>
                    </Col>
                    <Col span={ceilWidth}>
                      <Row className='row-model'>
                        <Col span={rowLWidth}>Insurer:</Col>
                        <Col span={rowRWidth}>{this.state.claimModel.insurerName}</Col>
                      </Row>
                    </Col>
                  </Row>
                </div>
              </div>
              {/* End Policy Info */}
              {/* Begin Claimant Info */}
              <div className='detail-info'>
                <div className='title'>Claimant</div>
                <div className='info-item'>
                  <Row className='info-model' gutter={2}>
                    <Col span={ceilWidth}>
                      <Row className='row-model'>
                        <Col span={rowLWidth}>Name:</Col>
                        <Col span={rowRWidth}>{this.state.claimModel.reporterName}</Col>
                      </Row>
                    </Col>
                    <Col span={ceilWidth}>
                      <Row className='row-model'>
                        <Col span={rowLWidth}>Phone:</Col>
                        <Col span={rowRWidth}>{this.state.claimModel.reporterPhone}</Col>
                      </Row>
                    </Col>
                    <Col span={ceilWidth}>
                      <Row className='row-model'>
                        <Col span={rowLWidth}>Email Address:</Col>
                        <Col span={rowRWidth}>{this.state.claimModel.reporterEmail}</Col>
                      </Row>
                    </Col>
                    <Col span={ceilWidth}>
                      <Row className='row-model'>
                        <Col span={rowLWidth}>Date of Accident:</Col>
                        <Col span={rowRWidth}>
                          {
                            T.formatDate(DateFormat, new Date(this.state.claimModel.accidentDate))
                          }
                        </Col>
                      </Row>
                    </Col>
                  </Row>
                </div>
              </div>
              {/* End Claimant Info */}

              {/* Begin Payee Info */}
              <div className='detail-info'>
                <div className='title'>Payee Info</div>
                <div className='info-item'>
                  <Row className='info-model' gutter={2}>
                    <Col span={ceilWidth}>
                      <Row className='row-model'>
                        <Col span={rowLWidth}>Card Holder:</Col>
                        <Col span={rowRWidth}>{this.state.claimAppModel.cardHolder}</Col>
                      </Row>
                    </Col>
                    <Col span={ceilWidth}>
                      <Row className='row-model'>
                        <Col span={rowLWidth}> Bank Account:</Col>
                        <Col span={rowRWidth}>{this.state.claimAppModel.accountNo}</Col>
                      </Row>
                    </Col>
                    <Col span={ceilWidth}>
                      <Row className='row-model'>
                        <Col span={rowLWidth}>Bank:</Col>
                        <Col span={rowRWidth}>{this.state.claimAppModel.bankName}</Col>
                      </Row>
                    </Col>
                  </Row>
                </div>
              </div>
              {/* End   Payee Info */}

              {/* Begin Claim Documents */}
              <div className='detail-info'>
                <div className='title'>Claim Documents</div>
                <div className='info-item'>
                  <Row>

                    <Col span={doubleWidth}>
                      <div className='img-title'>Identification Document (Front and Back)</div>
                      <div className='img-outer-box'>
                        <Row gutter={2}>
                          {
                            this.state.imageModel.idImages.map((image, index) => {
                              return (
                                <Col className='img-box' key={index} span={imageWidth}>
                                  <img src={ImageHeader + image.imageUrl} />
                                </Col>
                              )
                            })
                          }
                        </Row>
                      </div>
                    </Col>

                    {
                      // 财产 图片列表
                      this.state.claimModel.claimType == '1'
                        ? <div>
                          <Col span={doubleWidth}>
                            <div className='img-title'>Loss List </div>
                            <div className='img-outer-box'>
                              <Row gutter={2}>
                                {
                                  this.state.imageModel.losImages.map((image, index) => {
                                    return (
                                      <Col className='img-box' key={index} span={imageWidth}>
                                        <img src={ImageHeader + image.imageUrl} />
                                      </Col>
                                    )
                                  })
                                }
                              </Row>
                            </div>
                          </Col>
                          <Col span={doubleWidth}>
                            <div className='img-title'>Original loss or damage report issued by police, airline,hotel or relevant authorities </div>
                            <div className='img-outer-box'>
                              <Row gutter={2}>
                                {
                                  this.state.imageModel.losRepImages.map((image, index) => {
                                    return (
                                      <Col className='img-box' key={index} span={imageWidth}>
                                        <img src={ImageHeader + image.imageUrl} />
                                      </Col>
                                    )
                                  })
                                }
                              </Row>
                            </div>
                          </Col>
                        </div>
                        : ''
                    }

                    {
                      // 健康险 图片列表
                      this.state.claimModel.claimType == '2'
                        ? <div>
                          <Col span={doubleWidth}>
                            <div className='img-title'>Medical Certificate / Medical Report with diagnosis </div>
                            <div className='img-outer-box'>
                              <Row gutter={2}>
                                {
                                  this.state.imageModel.mcImages.map((image, index) => {
                                    return (
                                      <Col className='img-box' key={index} span={imageWidth}>
                                        <img src={ImageHeader + image.imageUrl} />
                                      </Col>
                                    )
                                  })
                                }
                              </Row>
                            </div>
                          </Col>
                          <Col span={doubleWidth}>
                            <div className='img-title'>Medical Receipt</div>
                            <div className='img-outer-box'>
                              <Row gutter={2}>
                                {
                                  this.state.imageModel.mrImages.map((image, index) => {
                                    return (
                                      <Col className='img-box' key={index} span={imageWidth}>
                                        <img src={ImageHeader + image.imageUrl} />
                                      </Col>
                                    )
                                  })
                                }
                              </Row>
                            </div>
                          </Col>
                        </div>
                        : ''
                    }

                    <Col span={doubleWidth}>
                      <div className='img-title'>Others</div>
                      <div className='img-outer-box'>
                        <Row gutter={2}>
                          {
                            this.state.imageModel.otherImages.map((image, index) => {
                              return (
                                <Col className='img-box' key={index} span={imageWidth}>
                                  <img src={ImageHeader + image.imageUrl} />
                                </Col>
                              )
                            })
                          }
                        </Row>
                      </div>
                    </Col>
                  </Row>
                </div>
              </div>
              {/* End Claim Documents */}

              {/* Start Send Email */}
              {
                this.state.claimModel.status == '1'
                  ? <div className='send-email-box'>
                    <Row>
                      <Col span={10}>
                        <FormItem {...formItemLayout} type='email' label="Recipient's email address">
                          {getFieldDecorator('claimEmail', {
                            rules: [{
                              type: 'email', message: 'The input is not valid E-mail!'
                            }, {
                              required: true, message: 'Please input E-mail!'
                            }]
                          })(
                            <Input placeholder='' />
                          )}
                        </FormItem>
                      </Col>
                      <Col span={8} offset={6}>
                        <Button
                          disabled={!menuAuth}
                          type='primary'
                          onClick={this.sendEmail.bind(this)}>
                          Send info to Insurer</Button>
                      </Col>
                    </Row>
                  </div>
                  : ''
              }
              {/* End   Send Email  */}

            </div>
          </div>

        </div>
      </div>
    )
  }
}

let ClaimDetailWrap = Form.create()(ClaimDetail)
export default connect(state => {
  return state.menuModel
})(ClaimDetailWrap)
